<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <link rel="stylesheet" href="css/sq.css" media="all">
    <title>Document</title>
</head>
<style>
    body {
        width: 100%;
        background-color: #e7e7e7;
        /* overflow: hidden; */
        overflow-y: scroll;
    }
    .news {
        padding: 3px 5px 3px 5px;
        /* border-bottom: 1px #999 solid; */
        overflow: hidden;
        background-color: #fff;
    }
    .news + .news {
        margin-top: 1px;
    }
    .news-title {
        font-size: 16px;
        color: black;
    }
    .news-imgs {
        width: 98%;
        overflow: hidden;
    }
    .news-imgs img {
        width: 98%;
    }
    .news-title + .news-imgs {
        margin-top: 4px;
    }
    .news-imgs + .news-details {
        margin-top: 4px;
    }
    .news-details {
        font-size: 10px;
        /* color: #999; */
    }
</style>
<body>
    <ul id='ts-newslist' style="overflow: hidden;">
    </ul>
</body>
<script type="text/javascript" src="js/jquery-3.3.1.min.js" language="JavaScript"></script>
<script src="layui/layui.js"></script>
<script src="js/config.js"></script>
<script src="js/echarts.min.js"></script>
<script>
    const log = console.log.bind(console)
    const getNewsItem = function(newsItem) {
        let o = newsItem
        log('newsItem', o)
        let string = ''
        if(o.imgs_list.length == 1) {
            string = `
                <li class="news">
            <div style="width: 100%; overflow: hidden; margin-bottom: 4px;">
                <div class="layui-col-xs8">
                    <div class="news-title">${o.news_title}</div>
                </div>
                <div class="layui-col-xs4">
                    <div class="news-imgs">
                        <img src="${o.imgs_list[0].img}" alt="">
                    </div>
                </div>
            </div>
            <div class="news-details">${o.from} ${o.create_time} ${o.comments_num}条评论</div>
        </li>
            `
        } else {
            let img_urls = o.imgs_list
            string = `
                        <li class="news layer-container">
                    <div class="news-title">${o.news_title}</div>
                    <div class="news-imgs">
                        <div class="layui-col-xs4">
                            <img src="${img_urls[0].img}" alt="">
                        </div>
                        <div class="layui-col-xs4">
                            <img src="${img_urls[1].img}" alt="">
                        </div>
                        <div class="layui-col-xs4">
                            <img src="${img_urls[2].img}" alt="">
                        </div>
                    </div>
                    <div class="news-details">${o.from} ${o.create_time} ${o.comments_num}条评论</div>
                </li>
            `
        }
        return string
    }
    function completeFilePath(fileName) {
            let prefix_path = 'news/'
            let filePath = prefix_path + fileName
            return filePath
    }
    function renderNewsList(jsonFilePath) {
        sq.setapi(jsonFilePath).setdata({}).sucessFun(function (rel) {
            var obj = rel.news_list;
            // 将新闻列表初始化为空
            $("#ts-newslist").html("");
            for (var i = 0; i < obj.length; i++) {
                let o = obj[i]
                // 条件加载
                let newsItemHtml = getNewsItem(o) 
                $("#ts-newslist").html($("#ts-newslist").html() + newsItemHtml)
            }
        }).run()
    }
</script>

<script>
    function main() {
        let jsonFilePath = completeFilePath('news1.json')
        renderNewsList(jsonFilePath)
    }
    main()
</script>
</html>